<template>
    <div>
        <el-dialog :title="editTitle" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-form :model="permissionForm" :rules="rules" ref="permissionForm" label-width="100px">
                <el-form-item label="权限类型" prop="type">
                    <el-select v-model="permissionForm.type" placeholder="请选择">
                        <el-option v-for="(item,index) in permissionType" :key="index" :label="item.value"
                                   :value="item.code"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="权限名称" prop="name">
                    <el-input v-model="permissionForm.name"></el-input>
                </el-form-item>
                <el-form-item label="权限编码" prop="code">
                    <el-input v-model="permissionForm.code"></el-input>
                </el-form-item>
                <el-form-item label="权限状态" prop="status">
                    <el-radio v-model="permissionForm.status" :label="1">启用</el-radio>
                    <el-radio v-model="permissionForm.status" :label="0">禁用</el-radio>
                </el-form-item>
                <el-form-item label="权限描述" prop="description">
                    <el-input v-model="permissionForm.description" type="textarea" :row="4" resize="none"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" type="primary" @click="submitForm('permissionForm')"
                           icon="el-icon-document-checked"
                           :loading="loading">确 定</el-button>
                <el-button size="small" type="info" @click="resetForm('permissionForm')"
                           icon="el-icon-refresh-left">重 置</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "PermissionEdit",
        props: {
            editTitle: {
                type: String,
                default: "提示信息"
            },
            dialogVisible: {
                type: Boolean,
                required: true
            },
            rowData: {
                type: Object,
                required: false
            }
        },
        watch: {
            rowData: function (newVal, oldVal) {
                if (newVal && newVal.id) {
                    this.queryDataById(newVal.id);
                } else {
                    this.permissionForm.id = null;
                }
            }
        },
        data() {
            return {
                loading: false,
                //权限数组
                permissionType: [],
                permissionForm: {
                    id: '',
                    name: '',
                    code: '',
                    status: 1,
                    description: ''
                },
                rules: {
                    type: [
                        {required: true, message: ' 权限类型不能为空', trigger: 'change'}
                    ],
                    name: [
                        {required: true, message: ' 权限名称不能为空', trigger: 'blur'},
                        // {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    code: [
                        {required: true, message: '权限编码不能为空', trigger: 'blur'},
                        // {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            handleClose() {
                this.resetForm('permissionForm');
                this.$emit("callBackFromSub", false);
            },
            querySelect(type) {
                this.$httpGet(this.$axiosCommonHttp, "api/rest/dict/kv/" + type, {}).then(res => {
                    if (res.code === 200 && res.data) {
                        this.permissionType = res.data.filter(o => o['parentId'] !== "0");
                    }
                })
            },
            submitForm(formName) {
                this.loading = true;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        delete this.permissionForm.addTime;
                        delete this.permissionForm.updateTime;
                        if (this.permissionForm.id) {
                            this.$httpPut(this.$axiosBaseHttp, "api/rest/auth/upd", this.permissionForm).then(res => {
                                if (res.code === 200) {
                                    this.resetForm('permissionForm');
                                    this.$emit("callBackFromSub", false);
                                    this.$successMsg(this.editTitle + "成功");
                                } else {
                                    this.$errorMsg(this.editTitle + "失败");
                                }
                                this.loading = false;
                            });
                        } else {
                            this.$httpPost(this.$axiosBaseHttp, "api/rest/auth/save", this.permissionForm).then(res => {
                                if (res.code === 200) {
                                    this.resetForm('permissionForm');
                                    this.$emit("callBackFromSub", false);
                                    this.$successMsg(this.editTitle + "成功");
                                } else {
                                    this.$errorMsg(this.editTitle + "失败");
                                }
                                this.loading = false;
                            });
                        }
                    } else {
                        this.loading = false;
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            queryDataById(id) {
                this.$httpGet(this.$axiosBaseHttp, "api/rest/auth/one", {id: id}).then(res => {
                    if (res.code === 200) {
                        this.permissionForm = res.data;
                    } else {
                        this.permissionForm = {status: 1};
                    }
                });
            }
        },
        mounted() {
            this.querySelect("power");
        }
    }
</script>

<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 16px;
        color: #8c939d;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }

    .avatar {
        width: 50px;
        height: 50px;
        display: block;
        border-radius: 50px;
    }

    .el-select {
        width: 100%;
    }
</style>